<template>
  <div>
    <!-- navbar -->
    <van-nav-bar title="我的" @click-left="onClickLeft">
      <template #left>
        <van-icon name="arrow-left" size="18" />
      </template>
      <template #right>
        <van-icon name="ellipsis" size="18" />
      </template>
    </van-nav-bar>
    <!-- introduction -->
    <div class="intro">
      <div class="userImg">
        <img src="../../assets/global/img/user.png" alt="" />
      </div>
      <div class="userInfo">
        <p>陈xx</p>
        <span>15344569875</span>
        <p class="address">广东省广州市天河区xxx</p>
      </div>
    </div>
    <!--金刚区  -->
    <div class="iconList">
      <div class="iconItem" @click="rentLink">
        <div class="iconPic">
          <img src="../../assets/global/icon/1.png" alt="" />
        </div>
        <span>已借出</span>
      </div>
      <div class="iconItem" @click="rentedLink">
        <div class="iconPic">
          <img src="../../assets/global/icon/2.png" alt="" />
        </div>
        <span>已归还</span>
      </div>
      <div class="iconItem" @click="recordLink">
        <div class="iconPic">
          <img src="../../assets/global/icon/3.png" alt="" />
        </div>
        <span>历史记录</span>
      </div>
    </div>
    <!--van-cell  -->
    <van-cell title="客服" icon="service" is-link @click="message"> </van-cell>
    <van-cell title="消息" icon="bell" is-link to="/notice"></van-cell>
    <!-- <van-button round class="logout">退出登录</van-button> -->
    <van-row gutter="20">
      <van-col span="8"></van-col>
      <van-col span="8">
        <van-button round class="logout" @click="logout"
          >退出登录</van-button
        ></van-col
      >
      <van-col span="8"></van-col>
    </van-row>
  </div>
</template>

<script>

const callPhone = () => {
  excuteBridge();
  console.log("**** begin callPhone() ****");
  ZWJSBridge.phoneCall({
    corpId: "12345678901",
  })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
  console.log("**** exit callPhone() ****");
};
callPhone();

import { Dialog } from "vant";
export default {
  methods: {
    onClickLeft() {
      this.$router.push("/");
    },
    rentLink() {
      this.$router.push("/rent");
    },
    rentedLink() {
      this.$router.push("/rented");
    },
    recordLink() {
      this.$router.push("/record");
    },
    logout() {
      this.$router.push("/cumster");
    },
    message() {
      Dialog.alert({
        title: "客服电话",
        message: "12345678901",
        theme: "round-button",
      }).then(() => {
        // on close
      });
    },
  },
};
</script>

<style scoped>
@media screen and (min-width: 320px) {
  .intro {
    width: 80%;
    height: 80px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
  }
  .userImg {
    width: 60px;
    height: 60px;
    background: pink;
    border-radius: 50px;
    position: relative;
    left: 10px;
    top: 10px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
  .userInfo {
    width: 140px;
    height: 60px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 30px;
    top: 10px;
    color: #fff;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 10px;
  }
  .address {
    font-size: 10px;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: 20px;
  }
  .iconList {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 80px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    text-align: center;
  }
  .iconItem {
    /* background: pink; */
  }
  .iconPic {
    width: 50px;
    height: 50px;
    /* background: chartreuse; */
    border-radius: 50px;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
}
@media screen and (min-width: 375px) {
  .intro {
    width: 80%;
    height: 100px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
    margin-top: 20px;
  }
  .userImg {
    width: 60px;
    height: 60px;
    background: pink;
    border-radius: 50px;
    position: relative;
    left: 20px;
    top: 20px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
  .userInfo {
    width: 140px;
    height: 60px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 40px;
    top: 20px;
    color: #fff;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 10px;
  }
  .address {
    font-size: 10px;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: 30px;
  }
  .iconList {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 80px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 12px;
    text-align: center;
  }
  .iconItem {
    /* background: pink; */
  }
  .iconPic {
    width: 50px;
    height: 50px;
    /* background: chartreuse; */
    border-radius: 50px;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
}
@media screen and (min-width: 414px) {
  .intro {
    width: 80%;
    height: 80px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
  }
  .userImg {
    width: 60px;
    height: 60px;
    background: pink;
    border-radius: 50px;
    position: relative;
    left: 10px;
    top: 10px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 50px;
  }
  .userInfo {
    width: 140px;
    height: 60px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 30px;
    top: 10px;
    color: #fff;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 10px;
  }
  .address {
    font-size: 10px;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: 40px;
  }
  .iconList {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 80px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    text-align: center;
  }
  .iconItem {
    /* background: pink; */
  }
  .iconPic {
    width: 50px;
    height: 50px;
    /* background: chartreuse; */
    border-radius: 50px;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
  /deep/.van-button {
    width: 100%;
    margin-top: 50px;
  }
}
@media screen and (min-width: 768px) {
  /deep/.van-nav-bar {
    width: 100%;
    line-height: 22px;
    font-size: 26px;
  }
  /deep/.van-nav-bar__content {
    height: 80px !important;
  }
  /deep/.van-nav-bar__title {
    font-size: 26px !important;
  }
  .intro {
    width: 80%;
    height: 200px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
    margin-top: 40px;
  }
  .userImg {
    width: 150px;
    height: 150px;
    background: pink;
    border-radius: 50px;
    position: relative;
    left: 20px;
    top: 20px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
  }
  .userInfo {
    width: 280px;
    height: 200px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 50px;
    top: 40px;
    color: #fff;
    font-size: 28px;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 26px;
  }
  .address {
    font-size: 20px;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: 40px;
  }
  .iconList {
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 100px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 22px;
    text-align: center;
  }

  .iconPic {
    width: 60px;
    height: 60px;
    /* background: chartreuse; */
    border-radius: 50px;
    margin: 0 auto;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
  /deep/.van-cell {
    line-height: 80px;
    height: 80px;
    /* background: pink; */
    font-size: 22px;
    margin-top: 20px;
    padding-left: 40px;
  }
  .van-cell__left-icon,
  .van-cell__right-icon {
    height: 80px;
    font-size: 24px;
    line-height: 80px;
  }
  /deep/.van-button {
    width: 100%;
    height: 60px;
    font-size: 22px;
    margin-top: 50px;
  }
}
@media screen and (min-width: 1024px) {
  /deep/.van-nav-bar {
    width: 100%;
    line-height: 22px;
    font-size: 26px;
  }
  /deep/.van-nav-bar__content {
    height: 80px !important;
  }
  /deep/.van-nav-bar__title {
    font-size: 26px !important;
  }
  .intro {
    width: 80%;
    height: 200px;
    background: #5a78ec;
    margin: 0 auto;
    border-radius: 27px;
    margin-top: 40px;
  }
  .userImg {
    width: 150px;
    height: 150px;
    background: pink;
    border-radius: 100px;
    position: relative;
    left: 20px;
    top: 20px;
    float: left;
  }
  .userImg img {
    width: 100%;
    height: 100%;
    border-radius: 100px;
  }
  .userInfo {
    width: 280px;
    height: 200px;
    /* background: lightyellow; */
    float: left;
    position: relative;
    left: 50px;
    top: 40px;
    color: #fff;
    font-size: 28px;
  }
  .userInfo p {
    margin: 0;
  }
  .userInfo span {
    font-size: 26px;
  }
  .address {
    font-size: 24px;
  }

  .logout {
    /* margin: 0 auto; */
    background: #a29e9e;
    color: #fff;
    margin-top: 40px;
  }
  .iconList {
    margin-top: 60px;
    margin-bottom: 60px;
    width: 100%;
    height: 100px;
    /* background: pink; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 28px;
    text-align: center;
  }

  .iconPic {
    width: 100px;
    height: 100px;
    /* background: chartreuse; */
    border-radius: 50px;
    margin: 0 auto;
  }
  .iconPic img {
    width: 100%;
    height: 100%;
  }
  /deep/.van-cell {
    line-height: 80px;
    height: 80px;
    /* background: pink; */
    font-size: 28px;
    margin-top: 20px;
    padding-left: 60px;
  }
  .van-cell__left-icon,
  .van-cell__right-icon {
    height: 80px;
    font-size: 28px;
    line-height: 80px;
  }
  /deep/.van-button {
    width: 100%;
    height: 80px;
    font-size: 28px;
    margin-top: 100px;
  }
}
</style>
